<div style="width: 100%; height: 60px;">
    <div style="width: 24%; height: 60px; background-color: #20CB9A; float: left; border-radius: 15px 15px 15px 15px; margin-right: 1%; text-align: center">
        <img th:src="@{/images/count.png}" style="width: 60px; height: 40px;"/>
        <label style="line-height: 60px">接口调用：<span id="apiCount"></span>次</label>
    </div>
    <div style="width: 24%; height: 60px; background-color: #23CDFD; float: left; border-radius: 15px 15px 15px 15px; margin-right: 1%; text-align: center">
        <img th:src="@{/images/api.png}" style="width: 60px; height: 40px;"/>
        <label style="line-height: 60px">接口：<span id="apiNum"></span>个</label>
    </div>
    <div style="width: 24%; height: 60px; background-color: #FECB9C; float: left; border-radius: 15px 15px 15px 15px; margin-right: 1%; text-align: center">
        <img th:src="@{/images/server.png}" style="width: 60px; height: 40px;"/>
        <label style="line-height: 60px">客户端应用：<span id="clientNum"></span>个</label>
    </div>
    <div style="width: 24%; height: 60px; background-color: #00D1DA; float: left; border-radius: 15px 15px 15px 15px; margin-right: 1%; text-align: center">
        <img th:src="@{/images/protect.png}" style="width: 60px; height: 40px;"/>
        <label style="line-height: 60px">被保护字段：<span id="fieldNum"></span>个</label>
    </div>
</div>

<script>
    $.ajax({
        url : contextPath + '/home/labelData',
        type : 'POST',
        success : function(data) {
            $("#apiCount").html(data.interfaceUsage);
            $("#apiNum").html(data.interfaceCount);
            $("#clientNum").html(data.clientApp);
            $("#fieldNum").html(data.protectItem);
        },
        error : function () {
            $("#apiCount").html(0);
            $("#apiNum").html(0);
            $("#clientNum").html(0);
            $("#fieldNum").html(0);
        }
    });
</script>
